<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更新游戏</title>
<%@ include file="../common/dev_head.jsp"%>
<style type="text/css">
.modal-dialog { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.modal-content { 
    /*overflow-y: scroll; */ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
} 

.modal-body { 
    overflow-y: scroll; 
    position: absolute; 
    top: 55px; 
    bottom: 65px; 
    width: 100%; 
} 

.modal-header .close {margin-right: 15px;} 

.modal-footer {
    position: absolute; 
    width: 100%; 
    bottom: 0; 
}

</style>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#mainmenu li").removeClass("active-menu");
			$("#mainmenu>li").eq(2).addClass("active-menu");
		});
		//设置模态框内的游戏id
		function setValue(vules){
			$("#modal_gid").val(vules);
		}
	</script>
	<div id="wrapper">
		<%@ include file="./dev_title.jsp"%>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h1 class="page-header">试玩游戏列表</h1>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<div class="panel panel-default">
							<div class="panel-heading"></div>
							<div class="panel-body">
								<c:if test="${!empty paly }">
									<div class="table-responsive">
										<table class="table table-striped table-bordered table-hover"
											id="dataTables-example" style="text-align: center;">
											<thead>
												<tr>
													<th>游戏名</th>
													<th>简介</th>
													<th>类型</th>
													<th>文件</th>
													<th>图片</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
												<c:forEach items="${paly }" var="p">
													<tr class="odd gradeX">
														<td style="width: 100px;">${p.palyName }</td>
														<td style="width: 200px;"><span>${p.palyIntroduce }</span></td>
														<td style="width: 100px;">${p.palyType.typeName }</td>
														<td style="width: 100px;" class="center">${p.palyFile }</td>
														<td style="width: 100px;" class="center"><img
															src="${pageContext.request.contextPath}/images/games/${p.palyImg}"
															width="50" height="50" alt="${p.palyName } " /></td>
														<td style="width: 100px;"><a href="#"
															data-toggle="modal" data-target="#myModal" onClick="setValue(${p.palyId})"><span
																class="glyphicon glyphicon-upload">更新</span></a></td>
													</tr>
												</c:forEach>
											</tbody>
										</table>
									</div>
									<!--Modal -->
									<div class="modal fade" id="myModal" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal"
														aria-hidden="true">&times;</button>
													<h4 class="modal-title" id="myModalLabel">游戏信息</h4>
												</div>
												<div class="modal-body">
													<div class="row">
														<div class="col-lg-12">
															<form role="form" enctype="multipart/form-data" id="modal_game">
																<input type="hidden" id="modal_gid" name="modal_gid">
																<div class="form-group">
																	
																	<label>游戏名称</label> 
																	<input type="text" id="modal_name" name="modal_name"
																		class="form-control"> 
																	<label>游戏类型</label> 
																	<select class="form-control" id="modal_type" name="modal_type">
																		<c:forEach items="${type }" var="t">
																			<option>${t.typeName }</option>
																		</c:forEach>
																	</select>
																	<label>游戏介绍</label>
																	<textarea id="modal_introduce" class="form-control" name="modal_introduce"
																		rows="2"></textarea>
																	<label>更新日志</label>
																	<textarea id="modal_log" class="form-control" name="modal_log"
																		rows="2"></textarea>
																	<div class="form-group">
																		<label>游戏封面</label> <input id="modal_img" name="modal_img"
																			type="file" multiple="multiple">
																	</div>
																	<div class="form-group" style="">
																		<img id="modal_show" src="">
																	</div>
																	<div class="form-group">
																		<label>游戏内容</label> <input id="modal_file" name="modal_file"
																			type="file" multiple="multiple">
																	</div>
																</div>
															</form>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-default"
														data-dismiss="modal">关闭</button>
													<button type="button" class="btn btn-primary" onClick="save()">保存设置</button>
												</div>
											</div>
										</div>
									</div>
									<script>
									//在模态框显示之前为模态框内元素赋值
									$('#myModal').on('show.bs.modal', function() {
										var gid=$("#modal_gid").val();
										$.ajax({
											url:getContextPath()+"/developer/findInf",
											data:{gid:gid},
											type:"POST",
											success:function(game){
												$("#modal_name").attr("value",game.palyName);
												$("#modal_introduce").text(game.palyIntroduce);
												$("#modal_type option[value="+game.palyType.typeName+"]").attr("selected","selected");
												$("#modal_show").attr("src",getContextPath()+"/images/games/"+game.palyImg);
											}
										});
									})
									
									function save(){
										var formData=new FormData($("#modal_game")[0]);
										
										$.ajax({
											url:getContextPath()+"/developer/update",
											type:"POST",
											data:formData,
											async: false,  
									        cache: false,  
									        contentType: false,  
									        processData: false,  
											success:function(result){
												switch(result){
													case "1":
														alert("修改成功!");
														window.location.href=getContextPath()+"/developer/goupdata";
														break;
													case "3":
														alert("文件保存失败,请稍后重试!");
														break;
													case "4":
														alert("游戏保存失败,请稍后重试!");
														break;
												}
											}
											
										});
									}
									
									</script>
									<!-- EndModal -->
								</c:if>
							</div>

						</div>
					</div>
					<!-- /. PAGE INNER  -->
				</div>
				<!-- /. PAGE WRAPPER  -->
			</div>
		</div>

	</div>
	<!-- /. WRAPPER  -->

</body>
<script>
	//图片修改flag
	var flag1=1;
	//文件修改flag
	var flag2=1;
	$("#modal_img").change(function() {
		flag1=0;
		var objUrl = getObjectURL(this.files[0]);
		if (objUrl) {
			// 在这里修改图片的地址属性  
			$("#modal_show").attr("src", objUrl);
		}
	});
	$("#modal_file").change(function (){
		flag2=0;
	});
	//获取上传文件的url
	function getObjectURL(file) {
		var url = null;
		// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
		if (window.createObjectURL != undefined) { // basic  
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)  
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome  
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}
</script>
</html>
